<!--
 * @Author: yumao 123456
 * @Date: 2025-09-18 16:41:01
 * @LastEditors: yumao 123456
 * @LastEditTime: 2025-09-19 09:47:02
 * @FilePath: \龙飞1\src\views\heimdallr\alarmEvent\detail.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="alarm-detail-container">
    <!-- 面包屑导航 -->
    <a-breadcrumb class="breadcrumb">
      <a-breadcrumb-item>
        <router-link to="/heimdallr/alarmEvent">告警事件管理</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>详情</a-breadcrumb-item>
    </a-breadcrumb>

    <!-- 告警信息 -->
    <a-card title="告警信息" :bordered="false" class="info-card">
      <a-row :gutter="24">
        <a-col :span="8">
          <div class="info-item">
            <span class="label">告警规则:</span>
            <span class="value">{{ detailData.ruleName || '--' }}</span>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="info-item">
            <span class="label">告警时间:</span>
            <span class="value">{{ detailData.lastAlarmTime || '--' }}</span>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="info-item">
            <span class="label">关联决策流:</span>
            <span class="value">{{ detailData.workflowName || '--' }}</span>
          </div>
        </a-col>
      </a-row>
      <a-row :gutter="24" style="margin-top: 16px">
        <a-col :span="8">
          <div class="info-item">
            <span class="label">节点类型:</span>
            <span class="value">{{ detailData.nodeTypeName || '--' }}</span>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="info-item">
            <span class="label">关联节点:</span>
            <span class="value">{{ detailData.nodeName || '--' }}</span>
          </div>
        </a-col>
      </a-row>
    </a-card>

    <!-- 连续告警列表 -->
    <a-card title="连续告警列表" :bordered="false" class="alarm-list-card">
      <a-table :columns="alarmColumns" :data-source="detailData.alarmHistory || []" :pagination="paginationConfig"
        row-key="alarmTime" size="middle">
        <!-- 告警时间列 -->
        <template slot="alarmTime" slot-scope="text">
          <span>{{ text }}</span>
        </template>

        <!-- 告警值列 -->
        <template slot="alarmValue" slot-scope="text">
          <div class="alarm-value-list">
            <div v-for="(item, index) in text" :key="index" class="alarm-value-item">
              <span class="item-index">{{ index + 1 }}、</span>
              <span class="index-name">{{ item.indexName }}:</span>
              <span class="index-value">{{ item.indexValue }}</span>
            </div>
          </div>
        </template>

        <!-- 统计开始时间列 -->
        <template slot="startTime" slot-scope="text">
          <span>{{ text }}</span>
        </template>

        <!-- 统计结束时间列 -->
        <template slot="endTime" slot-scope="text">
          <span>{{ text }}</span>
        </template>
      </a-table>
    </a-card>

    <!-- 通知人 -->
    <a-card title="通知人" :bordered="false" class="notice-card">
      <div v-if="detailData.noticeUserList && detailData.noticeUserList.length > 0">
        <div v-for="(notice, index) in detailData.noticeUserList" :key="index" class="notice-group">
          <div class="notice-header">
            <span class="notice-type">{{ getNoticeTypeText(notice.type) }}</span>
            <span class="notice-method">
              通知方式:
              <a-tag v-for="method in notice.noticeMethod" :key="method.key" color="blue">
                {{ method.key }}
              </a-tag>
            </span>
          </div>
          <div class="notice-users">
            <div v-for="user in notice.users" :key="user.noticeCode" class="user-item">
              <span class="user-name">{{ user.noticeName }}</span>
              <span v-if="user.phone" class="user-contact">电话: {{ user.phone }}</span>
              <span v-if="user.mail" class="user-contact">邮箱: {{ user.mail }}</span>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="empty-notice">
        <a-empty description="暂无通知人" />
      </div>
    </a-card>

    <!-- 告警处理过程 -->
    <a-card title="告警处理过程" :bordered="false" class="process-card">
      <div v-if="detailData.alarmHandlerHistory && detailData.alarmHandlerHistory.length > 0">
        <a-table :columns="processColumns" :data-source="detailData.alarmHandlerHistory" :pagination="false"
          row-key="handlerTime" size="middle">
          <!-- 处理时间列 -->
          <template slot="handlerTime" slot-scope="text">
            <span>{{ text }}</span>
          </template>

          <!-- 处理人列 -->
          <template slot="handlerUser" slot-scope="text">
            <span>{{ text }}</span>
          </template>

          <!-- 处理动作列 -->
          <template slot="action" slot-scope="text">
            <a-tag :color="getActionColor(text)">{{ text }}</a-tag>
          </template>

          <!-- 说明列 -->
          <template slot="description" slot-scope="text">
            <span>{{ text || '--' }}</span>
          </template>
        </a-table>
      </div>
      <div v-else class="empty-process">
        <a-empty description="暂无处理记录" />
      </div>
    </a-card>
  </div>
</template>

<script>
import { alarmEventGet } from '@/api/alarmEvent'

export default {
  name: 'AlarmEventDetail',
  data() {
    return {
      loading: false,
      detailData: {},
      // 分页配置
      paginationConfig: {
        current: 1,
        pageSize: 10,
        total: 0,
        showSizeChanger: false,
        showQuickJumper: false,
        hideOnSinglePage: false,
        // showTotal: (total, range) => `共 ${total} 条记录，当前显示 ${range[0]}-${range[1]} 条`,
        onChange: this.handlePageChange,
        onShowSizeChange: this.handlePageSizeChange
      },
      alarmColumns: [
        {
          title: '告警时间',
          dataIndex: 'alarmTime',
          key: 'alarmTime',
          scopedSlots: { customRender: 'alarmTime' }
        },
        {
          title: '告警值',
          dataIndex: 'alarmValue',
          key: 'alarmValue',
          width: 400,
          scopedSlots: { customRender: 'alarmValue' }
        },
        {
          title: '统计开始时间',
          dataIndex: 'startTime',
          key: 'startTime',
          scopedSlots: { customRender: 'startTime' }
        },
        {
          title: '统计结束时间',
          dataIndex: 'endTime',
          key: 'endTime',
          scopedSlots: { customRender: 'endTime' }
        }
      ],
      processColumns: [
        {
          title: '处理时间',
          dataIndex: 'handlerTime',
          key: 'handlerTime',
          scopedSlots: { customRender: 'handlerTime' }
        },
        {
          title: '处理人',
          dataIndex: 'handlerUser',
          key: 'handlerUser',
          scopedSlots: { customRender: 'handlerUser' }
        },
        {
          title: '处理动作',
          dataIndex: 'action',
          key: 'action',
          scopedSlots: { customRender: 'action' }
        },
        {
          title: '说明',
          dataIndex: 'description',
          key: 'description',
          scopedSlots: { customRender: 'description' }
        }
      ]
    }
  },
  mounted() {
    this.fetchDetailData()
  },
  methods: {
    // 获取详情数据
    async fetchDetailData() {
      const id = this.$route.query.id
      if (!id) {
        this.$message.error('缺少告警事件ID')
        this.$router.go(-1)
        return
      }

      this.loading = true
      try {
        const response = await alarmEventGet({ id })
        if (response.success) {
          this.detailData = response.data
          // 设置分页总数
          this.paginationConfig.total = (this.detailData.alarmHistory || []).length
        } else {
          this.$message.error(response.message || '获取详情失败')
        }
      } catch (error) {
        console.error('获取告警事件详情失败:', error)
        this.$message.error('获取详情失败')
      } finally {
        this.loading = false
      }
    },

    // 获取通知类型文本
    getNoticeTypeText(type) {
      const typeMap = {
        1: '通知对象',
        2: '其他类型'
      }
      return typeMap[type] || '未知类型'
    },

    // 获取处理动作颜色
    getActionColor(action) {
      const colorMap = {
        '挂起中': 'orange',
        '结束': 'green',
        '待处理': 'blue'
      }
      return colorMap[action] || 'default'
    },

    // 分页处理方法
    handlePageChange(page, pageSize) {
      this.paginationConfig.current = page
      this.paginationConfig.pageSize = pageSize
    },

    handlePageSizeChange(current, size) {
      this.paginationConfig.current = 1
      this.paginationConfig.pageSize = size
    }
  }
}
</script>

<style lang="less" scoped>
.alarm-detail-container {
  padding: 24px;
  background-color: #f0f2f5;
  min-height: 100vh;

  .breadcrumb {
    margin-bottom: 24px;
  }

  .info-card,
  .alarm-list-card,
  .notice-card,
  .process-card {
    margin-bottom: 24px;

    .info-item {
      display: flex;
      align-items: center;
      margin-bottom: 8px;

      .label {
        color: #666;
        margin-right: 8px;
        min-width: 80px;
        font-weight: 500;
      }

      .value {
        color: #333;
        font-weight: normal;
      }
    }

    .alarm-value-list {
      .alarm-value-item {
        display: flex;
        align-items: center;
        margin-bottom: 4px;
        font-size: 12px;

        .item-index {
          color: #999;
          font-size: 12px;
          margin-right: 4px;
          font-weight: normal;
        }

        .index-name {
          color: #666;
          margin-right: 4px;
        }

        .index-value {
          font-weight: 500;
          margin-right: 8px;
        }
      }
    }

    .notice-group {
      margin-bottom: 16px;
      padding: 16px;
      background-color: #fafafa;
      border-radius: 6px;

      .notice-header {
        display: flex;
        align-items: center;
        margin-bottom: 12px;

        .notice-type {
          font-weight: 500;
          color: #333;
          margin-right: 16px;
        }

        .notice-method {
          color: #666;
          font-size: 14px;
        }
      }

      .notice-users {
        .user-item {
          display: flex;
          align-items: center;
          margin-bottom: 8px;

          .user-name {
            font-weight: 500;
            color: #333;
            margin-right: 16px;
            min-width: 100px;
          }

          .user-contact {
            color: #666;
            margin-right: 16px;
            font-size: 14px;
          }
        }
      }
    }

    .empty-notice,
    .empty-process {
      text-align: center;
      padding: 40px 0;
    }
  }
}
</style>
